<!--vue模板-->
<template>
    <div>
      <!--搜索---->
      <div class="toolbar">
        <el-input
          placeholder="请输入分类名称"
          clearable
          style="width: 200px; margin-right: 10px"
          v-model="name"
        ></el-input>
        &nbsp;
        <el-button type="primary" @click="init">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
  
      <!--按钮区-->
      <div class="toolbar">
        <el-button type="primary" @click="save()">新增</el-button>
      </div>
  
      <!--表格数据-->
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          label="分类名称"
          prop="name"
          header-align="center"
          align="center"
          width="200"
        />
        <el-table-column
          label="创建时间"
          prop="createTime"
          header-align="center"
          align="center"
        />
        <el-table-column label="操作" header-align="center" align="center">
          <template #default="{ row }">
            <el-button
              type="primary"
              :icon="Plus"
              circle
              title="添加"
              @click="save()"
            />
            <el-button
              type="primary"
              :icon="Edit"
              circle
              title="编辑"
              @click="save(row.id, row.name)"
            />
            <el-button
              type="danger"
              :icon="Delete"
              circle
              title="删除"
              @click="del(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
  
      <!--新增修改产品-->
      <SaveOrUpdate
        ref="saveCategory"
        :visible="isShow"
        @close="isShow = false"
        @refresh="init()"
      />
    </div>
  </template>
  <!--vue组件选项定义-->
  <script setup>
  import { ref, onBeforeMount } from "vue";
  import { Delete, Edit, Plus } from "@element-plus/icons-vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { queryCategory, deleteCategory } from "@/api/category.js";
  import SaveOrUpdate from "./SaveOrUpdate.vue";
  
  //引用组件
  const saveCategory = ref(null);
  
  //是否显示修改
  const isShow = ref(false);
  
  //搜索条件
  const name = ref("");
  
  //表格数据
  const tableData = ref([]);
  
  //分页参数
  const page = ref(1); //当前页数
  const pageSize = ref(10); //每页记录数
  const total = ref(0); //总记录数
  
  //加载子节点函数
  /*async function load(row, resolve) {
    let params = {
      parentId: row.id
    };
    let res = await queryCategory();
    if (res.code == 200) {
      resolve(res.data);
    }
  }*/
  
  //方法
  async function init() {
    let params = {
      parentId: 0,
      name: name.value
    };
    let res = await queryCategory({ name: name.value });
    if (res.code == 200) {
      tableData.value = res.data;
    }
  }
  
  //重置
  function reset() {
    name.value = "";
    init();
  }
  
  //保存
  function save(id, name, parentId) {
    //显示组件
    isShow.value = true;
    //调用组内的初始方法
    saveCategory.value.init(id, name, parentId);
  }
  
  //删除
  function del(id) {
    ElMessageBox.confirm("你确定删除吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        //确认删除
        todel(id);
      })
      .catch(() => {});
  }
  
  async function todel(id) {
    let res = await deleteCategory(id);
    if (res.code == 200) {
      ElMessage({
        message: "删除成功",
        type: "success"
      });
      init();
    }
  }
  
  //生命周期钩子
  onBeforeMount(() => {
    init();
  });
  </script>
  <!--vue样式  scoped当前样式只适用于当前组件-->
  <style scoped>
  .toolbar {
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    padding-left: 20px;
  }
  </style>
  